<script setup lang="ts">
import { computed, ref } from 'vue';
import { catecfg, mainIndexHandler } from '@/common/api/hbMarket';
import { useList } from '@/composables/useList';
import { useCacheScrollTop } from '@/composables/useCacheScrollTop';
import type { OnPage } from '@/composables/useList';
import listItem from '../components/listItem.vue';
import noticeBar from '@/components/noticeBar.vue';
import { useRouter } from 'vue-router';
import searchField from '@/components/searchField.vue';
import { useItemWidth } from '../hooks/useItemWidth';

const router = useRouter();
const itemWidth = useItemWidth();
// 缓存页面滚动位置
useCacheScrollTop('main', 'hbMarketHome');

const keyword = ref(''); // 搜索参数：手机号或者邀请码

const server: OnPage = async (listConfig) => {
  const res = await mainIndexHandler({ ...listConfig, keyword: keyword.value });
  const { list } = res.result;
  // console.log('list: ', list);
  return list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh } = useList(server, true);

const waterfall = computed(() => {
  let l1 = [];
  let l2 = [];
  for (const i in list.value) {
    if (parseFloat(i) % 2 === 0) {
      l1.push(list.value[i]);
    } else {
      l2.push(list.value[i]);
    }
  }
  return [l1, l2];
});

const categoryLoading = ref(false);
const lunbo = ref<{ image: string; url: string }[]>([]); // 轮播图
const msgList = ref<string[]>([]); // 消息列表
const category = ref<{ cateimg: string; catename: string }[]>(); // 分类列表

const getCatecfg = async () => {
  categoryLoading.value = true;
  try {
    const res = await catecfg({});
    const data = res.result.data;
    lunbo.value = data.lunbo;
    msgList.value = data.msg;
    category.value = data.category;
    // console.log(data);
  } catch (e) {
    console.error(e);
    /** empty */
  } finally {
    categoryLoading.value = false;
  }
};
getCatecfg();

// 前往商品列表
const toGoodList = (catename: string) => {
  router.push(`/hbMarket/goodList?catename=${catename}`);
};
</script>
<template>
  <div class="hbMarketHome">
    <div class="px-3 pt-3">
      <searchField v-model="keyword" @on-search="onRefresh" />
    </div>
    <!-- 轮播图 -->
    <div class="m-3">
      <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, idx) in lunbo" :key="idx">
          <van-image width="100%" height="100%" radius="6" :src="item.image" fit="cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 通知栏 -->
    <div class="mx-3 mb-2">
      <noticeBar :msg-list="msgList" />
    </div>
    <!-- 分类栏 -->
    <div class="bg-white p-2 grid grid-cols-5 gap-2 mx-3 rounded" v-show="!categoryLoading">
      <div
        v-for="item in category"
        :key="item.catename"
        @click="toGoodList(item.catename)"
        class="flex flex-col items-center"
      >
        <van-image width="30px" height="30px" :src="item.cateimg" />
        <div class="text-xs mt-1 text-[#343434]">{{ item.catename }}</div>
      </div>
    </div>
    <div class="bg-white p-2 mx-3 rounded" v-show="categoryLoading">
      <van-skeleton title :row="2" />
    </div>
    <!-- 列表栏 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="flex p-3">
          <div class="flex-1 mr-2">
            <listItem v-for="item in waterfall[0]" :key="item.pid" :item="item" :itemWidth="itemWidth" />
          </div>
          <div class="flex-1">
            <listItem v-for="item in waterfall[1]" :key="item.pid" :item="item" :itemWidth="itemWidth" />
          </div>
        </div>
        <template v-if="finished && !list.length">
          <van-empty />
        </template>
        <!-- 底部安全区 -->
        <div class="van-safe-area-bottom"></div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<style lang="less" scoped>
.hbMarketHome {
  min-height: 100%;
  background: #f6f6f6;
  padding-top: 1px;
  .my-swipe {
    height: 120px;
  }
}
</style>
